<template>
	<view class="order-list">
		
		<view class="head">
			<view>订单信息</view>
			<view class="circle-btn">
				<text class="txt" @click="back">返</text>
			</view>
		</view>
		
		<view class="list-tab">
			<view class="btn" :class="[ this.way == 0  ? 'active' : '']" @click="wayChange(0)">寄件{{ relicOrderNum }}件</view>
			<view class="btn" :class="[ this.way == 1  ? 'active' : '']" @click="wayChange(1)">取件{{ takeOrderNum }}件</view>
		</view>
				
		<scroll-view class="list" :scroll-y="true">
			<view class="list-item" v-for="v in orderList" :key="v.id">
				<view class="orderNo" @tap="jump(v)">
					运单号：<text>{{ v.relicOrderId || v.takeOrderId }}</text>
				</view>
				
				<view class="orderStatus">
					<view class="arrow">
						<image src="/static/yellow-arrow.png" class="yellow-arrow" mode="aspectFill"></image>
					</view>
					
					<view class="status-box">
						<view class="line"> {{v.wareHouseName }}</view>
						<view class="status">{{ statusLabel(v.relicStatus || v.takeStaus) }}</view>
					</view>

					
				</view>
				
				<view class="time">
					签收时间：<text>{{ v.completionTime }}</text>
				</view>
				<view class="time">
					取件码：<text>{{ v.claimCode }}</text>
				</view>
				
				<view class="acions">
					<view class="btn" @tap="cancelOrder(v)" v-if="[1,2,3].includes(v.relicStatus || v.takeStaus)">
						取消订单
					</view>
					
				<!-- 	<view class="btn" @tap="updateOrder(v.relicOrderId || v.takeOrderId)">
						添加备注
					</view> -->
					
					<!-- <view class="btn" @tap="deleteOrder(v.orderId)">
						删除订单
					</view> -->
				</view>
				
			</view>
		
		    <view v-show="!orderList.length" class="no-oders-tip">
				暂无订单
			</view>
		</scroll-view>
				
		<view class="search-box">
			<view class="search">
				<view class="search-input">
					<input v-model="keywords"  placeholder="订单号/关键字索引" placeholder-style="color: rgba(255,255,255, 0.9);" />
				</view>
				
				<view class="search-btn" @click="search">
					查询
				</view>
			</view>
		</view>
		
	<view class="image-popup" v-if="showImage">
			<!-- 点击图片外部可关闭弹窗 -->
			<view class="mask" @click="showImage = false"></view>
			<!-- 实际显示的图片 -->
			<view class="customer">
				<image :src="qrcode" mode="aspectFit"></image>
				<text class="customer-tip">请添加客服二维码，取消订单</text>
			</view>
			
    </view>
	
	
	</view> 
</template>

<script>
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	import * as api from '../../utils/api.js';
	
	const senderOrderStatusMap = [
		{ label: '等待客服确认', val: 1 },
		{ label: '自寄中', val: 2 },
		{ label: '上门取件中', val: 3 },
		{ label: '订单完成', val: 4 },
		{ label: '订单取消', val: 5 },
	];
	const withdrawOrderStatusMap = [
		{ label: '等待客服确认', val: 1 },
		{ label: '自取中', val: 2 },
		{ label: '派送中', val: 3 },
		{ label: '订单完成', val: 4 },
		{ label: '订单取消', val: 5 },
	];
	
	export default {
		data() {
			return {
				imgPrex,
				senderOrderStatusMap,
				withdrawOrderStatusMap,
				showImage: false,
				qrcode: '',
				way: 0,
				keywords: null,
				formData: {
					 eltrInfo: null,
					 contact: null,
					 telephone: null,
					 doorTime: null,
				},
				relicOrderNum: 0, // 0 存物体订单
				takeOrderNum: 0, // 1 取物
				orderList: [],
				relicStatus: [], // 存物字典
				takeStaus: [],  // 取物字典
			}
		},
		computed: {
		  // sendOrders () {
			 //  if (!this.orderList || !this.orderList.length) return [];
			 //  return this.orderList.filter(v => v.type=== 'sender')
		  // },
		  // withdrawOrders(){
			 //  if (!this.orderList || !this.orderList.length) return [];
			 //  return this.orderList.filter(v => v.type=== 'withdraw')
		  // }	  
		},
		onLoad() {
			
			this.getRelicOrderNum();
			this.getTakeOrderNum();
			
			this.getOrderList();
			
			this.relicStatus = JSON.parse(uni.getStorageSync('relic_status'));
			this.takeStatus = JSON.parse(uni.getStorageSync('take_status'));
		},
		methods: {
			statusLabel (status) {
				let statusMap;
				if (this.way == 0) {
					statusMap = this.relicStatus || [];
				} else {
					statusMap = this.takeStatus || [];
				}
				
				return statusMap.find(v => v.dictValue == status)?.dictLabel;
			},
			async getRelicOrderNum () {
				const res = await api.personalRelicOrderList();
				this.relicOrderNum = res.total || 0;
			},
			async getTakeOrderNum () {
				const res = await api.personalTakeOrderList();
				this.takeOrderNum = res.total || 0;
			},
			async getOrderList() {
			   const keywords = this.keywords;
			   const requestFun = this.way == 0 ? api.personalRelicOrderList : api.personalTakeOrderList;
			   const res = await requestFun({keywords, pageNum: 1, pageSize: 10000 });
			   this.orderList = res.rows || [];

			   if (this.way == 0) {
				   this.relicOrderNum = res.total;
			   } else {
				   this.takeOrderNum = res.total;
			   }
			   
			},
			wayChange (val) {
				this.way = val;
				this.keywords = '';
				this.getOrderList();
			},
			back () {
				uni.navigateBack()
			},
			search() {
				this.getOrderList();
			},
			// 去往订单详情页面
			jump (order) {
				const orderId = order.relicOrderId || order.takeOrderId;
				uni.navigateTo({
					url: `/pages/order/detail?orderId=${orderId}&way=${this.way}`
				})
			},
			async getCustomerService (wareHouseId) {
				const defaultPng = '/static/default-avatar.jpg';
				const res = await api.getCustomerService({wareHouseId});
				this.qrcode = this.imgPrex + res.rows[0].customerServiceVx;
			},
			async cancelOrder(order) {

				const id =  order.relicOrderId || order.takeOrderId;
				const status = order.relicStatus || order.takeStaus;
				// 特殊取消状态 --- 联系后台客服手动取消
				if (status == 3) {
			       this.showImage = true;
			       const wareHouseId = order.wareHouseId;
			       this.getCustomerService (wareHouseId);
                   return;
				}
				 
				uni.showModal({
				        title: '提示',
				        content: '你确定要取消吗？',
				        confirmText: '确定',
				        cancelText: '取消',
				        success: async (res) => {
				          if (res.confirm) {
				            console.log('用户点击了确定');
				            const requestFun = this.way == 0 ? api.cancelRelicOrder : api.cancelTakeOrder;
				            const orderId = id;
				            const res = await requestFun({orderId});
					        res.code == 200 && this.myToast(res.msg);
				            this.search();
							
				          } else if (res.cancel) {
				            console.log('用户点击了取消');
				            // 在这里执行取消后的操作
				          }
				        }
				 });
				
				
			},
			async deleteOrder(id) {
				const requestFun = this.way == 0 ? api.deleteRelicOrder : api.deleteTakeOrder;
				const orderId = id;
				const res = await requestFun({orderId});
				// 刷新一下页面
				this.search()
			},
			// 更新订单信息
			async updateOrder (id) {
				
			},
			myToast(msg, icon = 'none') {
				uni.showToast({
					icon: icon,
					title: msg,
					duration:2000
				})
			},
		}
	}
</script>

<style lang="scss">
  .order-list {
	  color: white;
	  padding: 40rpx 20rpx;
	  align-items: center;
	  
	  
	  .circle-btn {
	  			  width: 90rpx;
	  			  height: 90rpx;
	  			  border-radius: 50%;
	  			  background-color: #e5b44d;
	  			  text-align: center;
	  			  line-height: 90rpx;
	  			  .txt {
	  				  color: black;
	  				  font-size: 22px;
	  			  }
	  }
	  .head {
		  display: flex;
		  padding: 0rpx 10rpx;
		  justify-content: space-between;
		  font-size: 46rpx;
	  }
	   
	 .list-tab {
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 font-size: 30rpx;
		 margin: 0rpx 0;
		 padding: 40rpx 150rpx;
		 border-radius: 10rpx;
		 .btn {
			 border-radius: 100rpx;
			 padding: 6px 30rpx;
			 color: white;
		 }
		 .btn.active{
			 color: black;
			 background-color: #e7b34d;
		 }
	 }
     
		 
	 .list {
		 height: calc(100vh - 480rpx);
		 .list-item {
			margin: 10rpx 0;
			padding: 26rpx 20rpx; 
			border-radius: 10rpx;
		 	background-color: #2f2f2f;
			border: 1px solid  rgba(0, 0, 0, 0.5);
			.orderNo {
				font-size: 28rpx;
			}
			.orderStatus {
				display: flex;
				padding: 20rpx 0;
				justify-content: center;
				align-items: center;
				.arrow {
					.yellow-arrow {
						width: 300rpx;
						height: 50rpx;
					}
				}
				.status-box {
					margin: 0 10rpx;
				}
			}
			.time {
				padding: 8rpx 0; 
			}	
			.acions {
				position: relative;
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				.btn {
					padding: 0 20rpx;
					border-radius: 30rpx;
					border: 1px solid rgba(255, 255, 255, 0.3);
				}
			}	 
		 }
		 .no-oders-tip {
			 padding: 50rpx;
			 font-size: 50rpx;
			 color: white;
			 text-align: center;
		 }
	 }
	 
	 
		
	  .search-box {
          margin-top: 40rpx;
		  padding: 20rpx 22rpx;
		  box-sizing: border-box;
		  
		  border-radius: 10rpx;
		  background-color: #2f2f2f;
		  .search {
		  		  display: flex;
		  		  align-items: center;
		  		  border: 1px solid rgba(255, 255, 255, 0.3);
		  		  border-radius: 30rpx;
				  padding-left: 10rpx;
		  		  .search-input {
		  			 flex: 1;
		  		  }
		  		  .search-btn {
					  display: inline-block;
		  			  padding: 0 30rpx;
		  			  border-radius: 30rpx;
		  			  background-color: #e7b34d;
		  			  color: black;
					  text-align: center;
		  			  letter-spacing: 20rpx;
		  			  font-size: 30rpx;
		  		  }
		  }
	  }  
	 
	/* 图片弹窗容器样式 */
	.image-popup {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
        display: flex;
		justify-content: center;
		align-items: center;
	    z-index: 999;
		/* 遮罩层样式 */
		.mask {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    background-color: rgba(0, 0, 0, 0.5);
		}
		.customer {
			margin: 0 auto;
			display: flex;
			gap: 20rpx;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.customer-tip {
				color: white;
				z-index: 1000;
			}
		}
		/* 图片样式 */
		image {
			margin-top: 100rpx;
		    max-width: 80%;
		    max-height: 80%;
		    z-index: 1000;
		}
		
	}
	

  }
</style>
